<template>
  <el-card shadow="never">
    <div ref="formHeightRef">
      <div
        style="
          display: flex;
          border-bottom: 1px solid #f1f1f1;
          padding-bottom: 5px;
        "
      >
        <div v-if="formConfig" style="display: flex">
          <el-checkbox @change="fuzzyQuery = !fuzzyQuery" v-model="fuzzyQuery"
            >模糊</el-checkbox
          >
          <el-button
            type="primary"
            :icon="Search"
            @click="getSelectData(formRef)"
            style="margin-left: 10px"
            >统 计</el-button
          >
        </div>
        <div style="display: flex; justify-content: flex-end; flex: 1">
          <el-button type="primary" :icon="Printer" plain @click="print1"
            >打 印</el-button
          >
          <el-button :icon="Upload" @click="exportExcel">导 出</el-button>
        </div>
      </div>
      <!-- <el-divider /> -->
      <div v-if="formConfig" style="margin-top: 10px">
        <sc-form
          ref="formRef"
          :config="formConfig"
          v-model="form"
          :fileName="fileName"
        >
        </sc-form>
      </div>
    </div>
  </el-card>
  <el-card style="margin-top: 20px" shadow="never">
    <div class="content" v-html="reportData" ref="printTable"></div>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
import API from "@/api/model/report";
import { Search, Printer, Upload } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { parameterParsing } from "@/utils/parsing";
import print from "@/utils/print";
import { deepClone } from "@/utils/arr";
import useTabs from '@/utils/useTabs'
const route = useRoute();
const reportData = ref();
const formConfig = ref();
const form = ref({});
const fileName = ref();
const formRef = ref(null);
const fuzzyQuery = ref(true);
let h;
const printTable = ref(null);
onMounted(() => {
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!iOS) {
    h = window.innerHeight;
  } else {
    h = screen.height;
  }
  let path = route.path.split("/");
  if (path[2] !== undefined) {
    fileName.value = path[2];
  }
  if (route.query !== undefined) { 
    form.value = deepClone(route.query);
    if(route.query.fileName){
      fileName.value = route.query.fileName
    }
    if(route.query.printBill === '1'){
      delete form.value.printBill
      getData()
    }
    else{
      getInit()
      getData()
    }
  }
  else{
    getInit()
  }
  if(route.query.title){
    useTabs.setTitle(route.query.title)
  }
});
const getSelectData = async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      getData();
    }
  });
};
const getInit = async () => {
  var params = {
    fileName: fileName.value,
    fieldMap: form.value,
  };
  let res = await API.InitviewReport.post(params);
  if (res.code == "200") {
    reportData.value = res.reportContent;
    formConfig.value = res.bean.form;
  }
};
const getData = async () => {
  let params = {
    fileName: fileName.value,
    fieldMap: form.value,
  };
  console.log(params,'条件')
  let res =await API.previewReport.post(params);
  console.log(res,'excel数据')
  if (res.code == "200") {
    reportData.value = res.reportContent;
  }
};
const print1 = () => {
  print(printTable.value);
};
const exportExcel = async () => {
  let res = await API.exportToExcel.post({
    fileName: fileName.value,
    fieldMap: form.value,
  });
  if(res.code == '200'){
    window.open(res.fileName)
  }
};
</script>
<style lang="less" scoped>
.content{
  position: relative;
 overflow-x: auto;
 // 滚动条的样式,宽高分别对应横竖滚动条的尺寸
  &::-webkit-scrollbar {
    width: 3px;
  }

  // 滚动条里面默认的小方块,自定义样式
  &::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
  }

  // 滚动条里面的轨道
  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
</style>